$--tooltip-fill: rgba(0, 0, 0, 0.6);
$--tooltip-color: rgba(0, 0, 0, 0);
$--tooltip-light-fill: var(--theme-color-border-split);
$--tooltip-light-color: rgba(255, 255, 255);
.el-tooltip__popper {
  padding: 8px 10px;
  border-radius: var(--theme-border-radius);
  line-height: 22px;
  // .popper__arrow {
  //   display: none;
  // }
  &.is-dark {
    background: rgba(0, 0, 0, 0.6);
    &[x-placement^="top"] .popper__arrow {
      border-top-color: $--tooltip-fill;
      &::after {
        border-top-color: $--tooltip-color;
      }
    }
    &[x-placement^="bottom"] .popper__arrow {
      border-bottom-color: $--tooltip-fill;
      &::after {
        border-bottom-color: $--tooltip-color;
      }
    }
    &[x-placement^="left"] .popper__arrow {
      border-left-color: $--tooltip-fill;
      &::after {
        border-left-color: $--tooltip-color;
      }
    }
    &[x-placement^="right"] .popper__arrow {
      border-right-color: $--tooltip-fill;
      &::after {
        border-right-color: $--tooltip-color;
      }
    }
  }
  &.is-light {
    background: #ffffff;
    &[x-placement^="top"] .popper__arrow {
      border-top-color: $--tooltip-light-fill;
      &::after {
        border-top-color: $--tooltip-light-color;
      }
    }
    &[x-placement^="bottom"] .popper__arrow {
      border-bottom-color: $--tooltip-light-fill;
      &::after {
        border-bottom-color: $--tooltip-light-color;
      }
    }
    &[x-placement^="left"] .popper__arrow {
      border-left-color: $--tooltip-light-fill;
      &::after {
        border-left-color: $--tooltip-light-color;
      }
    }
    &[x-placement^="right"] .popper__arrow {
      border-right-color: $--tooltip-light-fill;
      &::after {
        border-right-color: $--tooltip-light-color;
      }
    }
  }
}
